import { useState, useEffect } from 'react'
import style from './index.module.scss'
import HeaderView from '@/components/Header/index'
import Bottom from '@/components/Bottom/index'
import LoadingView from '@/components/Loading/index'
import LeftSlider from './component/LeftSlider'
import RigthTab from './component/RigthTab'
import { GetCategory } from '@/api/category'

const Category = () => {
  const [flag, setFlag] = useState(true)
  const [loadingCode, setLoadingCode] = useState(1)
  const [leftCollapse, setLeftCollapse] = useState([])
  const [menuID, setMenuID] = useState(0) // 左侧菜单导航

  // 数据初始化
  const init = async () => {
    const res = await GetCategory().catch((err) => {
      if (err.code === 'ECONNABORTED' || err.code === 'ERR_NETWORK') setLoadingCode(2)
    })

    try {
      if(res?.status === 200) {
       setFlag(false)
       setLeftCollapse(res.data.categories) 
      }
    } catch (error) {
       console.log(error)
    }
  }   

  useEffect(() => {
    init()
  }, [])

  const sliderBarClick = (id: number) => {
    setMenuID(id)
  }
  return (
    <>
      {/* 头部信息 */}
      <HeaderView title='商品详情' backIcon={false} backPath=''></HeaderView>
 
      {/* 内容信息 */}
      <div className={style.content}>
        {/* 左侧slider */}
        <div className={style.left}>
          <LeftSlider leftCollapse={leftCollapse} sliderBarClick={sliderBarClick}></LeftSlider>
        </div>

        {/* 右侧选项卡 */}
        <div className={style.right}>
           <RigthTab menuID={menuID}></RigthTab> 
        </div>
      </div>

      {/* 底部tabbar */}
      <Bottom></Bottom>

      {/* 加载中或者加载超时 */}
      {flag && <LoadingView loadingCode={loadingCode}></LoadingView>}
    </>
  )
}

export default Category